<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>朋友管理頁面</title>

<link rel="stylesheet" href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>

<script>
	$(function() {
		$(".block").hover(function(){
			$(this).toggleClass("block2",300).clearQueue();
		});
		
					var availableTags = [
		       		      "ActionScript",
		       		      "AppleScript",
		       		      "Asp",
		       		      "BASIC",
		       		      "C",
		       		      "C++",
		       		      "Clojure",
		       		      "COBOL",
		       		      "ColdFusion",
		       		      "Erlang",
		       		      "Fortran",
		       		      "Groovy",
		       		      "Haskell",
		       		      "Java",
		       		      "JavaScript",
		       		      "Lisp",
		       		      "Perl",
		       		      "PHP",
		       		      "Python",
		       		      "Ruby",
		       		      "Scala",
		       		      "Scheme"
		       		    ];
					$( "#newfriend" ).autocomplete({
					      source: availableTags
					    });
	});

</script>

<style>
.block {
	display:inline-block;
	position: relative;
	border-style: outset;
	border-color: orange;
	border-radius: 60px;
	border-width: 7px;
	margin: 15px;
	padding:15px;
	background-image:url('../images/paperbackground.jpg');
	box-shadow: 10px 10px 15px black;
}
.block2 {
	border-color: yellow;
	box-shadow: 0px 0px 20px yellow;
	top: -10px;
	left: -5px;
}
.textblock {
	display:inline-block;
	border-style: outset;
	border-color: white;
	border-radius: 60px;
	border-width: 2px;
	margin: 4px;
	padding:8px;
	background-image:url('../images/paperbackground_white.jpg');
	box-shadow: 2px 2px 2px black;
}
input.text {
	margin-bottom: 12px;
	width: 200px;
	padding: .4em;
	font-size: 16px;
	font-family: '微軟正黑體';
}
.thumbnail {
	border-style: outset;
	border-color: black;
	border-radius: 40px; 	
	box-shadow: 2px 2px 2px black; 
	margin:5px;
}
</style>

</head>

<body>
	<div style="text-align: center;">
	<input type="text" id="newfriend" placeholder="新增好友" class="text ui-widget-content ui-corner-all">
	</div>
	<div class="block">
	<img src="../images/cat3.jpg" onclick="" width="160" height="auto" class="thumbnail"><br><div style="text-align:center;"><span class="textblock">廖小凱</span><br><span>cecj001</span></div>
	</div>
	<div class="block">
	<img src="../images/cat4.jpg" onclick="" width="160" height="auto" class="thumbnail"><br><div style="text-align:center;"><span class="textblock">陳小愷</span><br><span>cj4</span></div>
	</div>
	<div class="block">
	<img src="../images/cat2.jpg" onclick="" width="160" height="auto" class="thumbnail"><br><div style="text-align:center;"><span class="textblock">小姜</span><br><span>a854981</span></div>
	</div>
	<div class="block">
	<img src="../images/cat3.jpg" onclick="" width="160" height="auto" class="thumbnail"><br><div style="text-align:center;"><span class="textblock">廖小凱</span><br><span>cecj001</span></div>
	</div>
	<div class="block">
	<img src="../images/cat4.jpg" onclick="" width="160" height="auto" class="thumbnail"><br><div style="text-align:center;"><span class="textblock">陳小愷</span><br><span>cj4</span></div>
	</div>
	<div class="block">
	<img src="../images/cat2.jpg" onclick="" width="160" height="auto" class="thumbnail"><br><div style="text-align:center;"><span class="textblock">小姜</span><br><span>a854981</span></div>
	</div>
</body>

</html>
